<template>

  <div class="userList">
    <h3>人员信息</h3>
    <el-button type="primary" @click="addUser">添加人员</el-button>
    <el-button type="danger" @click="deleteSelectUser">删除人员</el-button>

    <table class="user-table">
      <thead>
      <tr>
        <th><input type="checkbox" @change="checkAll"></th>
        <th>序号</th>
        <th>账号</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(u,index) in userList" :key="u.id"
          :class="'row-light'+index%2+' '+(u.id===undefined?'cant-select':'')">
        <td><input type="checkbox" v-if="u.id!==undefined" :checked="u.isChecked"></td>
        <td>{{ u.id }}</td>
        <td>{{ u.account }}</td>
        <td>{{ u.name }}</td>
        <td>
          <a class="btn-col-edt" v-if="u.id!==undefined" @click="update(u)">编辑</a>
          <a class="btn-col-rmv" v-if="u.id!==undefined" @click="deleteUser(u.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="el-page">
      <el-pagination
          v-model="pageHelper"
          @click="testpage"
          @next-click="nxtPage"
          @prev-click="prvPage"
          :layout="pageLayout"
          :page-count="pageHelper.totalPage"
          :pager-count="5"
          :default-current-page="1"
          :page-size="10"
          :background="true"
          :total="1000"/>
    </div>
  </div>
  <el-dialog v-model="addPersonnel"  style="background-color: rgb(13, 41, 67)" width="500px" >
    <template #header="{  titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">成员编辑</h4>

      </div>
    </template>
    <AddPersonnel v-if="addPersonnel" :userInfo="userInfo"   @change="change"></AddPersonnel>
  </el-dialog>
</template>

<script>
import {ElMessageBox} from "element-plus";
import AddPersonnel from "@/components/include/AddPersonnel";

export default {
  name: "UserInfo",
  components: {AddPersonnel},

  data() {
    return {
      pageLayout: "prev,pager,next",
      addPersonnel: false,
      userList: [
        {id: 1, account: 15772719065, name: "天澤", isChecked: false,permissions:[]},
        {id: 2, account: 15772719069, name: "汐", isChecked: false},
        {id: 3, account: 15772719068, name: "hatsune miku", isChecked: false},
        {id: 4, account: 15772719062, name: "亚伯拉罕", isChecked: false},
        {id: 5, account: 16684828250, name: "唐小明", isChecked: false},
        {id: 6, account: 15772719061, name: "kon sashi", isChecked: false},
        {id: 7, account: 15772719063, name: "amasawa", isChecked: false},
        {id: 8, account: 15772719064, name: "张麻子", isChecked: false},
      ],
      userInfo: {},
      pageHelper: {
        totalPage: 12,
        currentPage: 1,
      },
      //显示的页数(固定5个)
      showPages: []
    }
  },
  methods: {
    update(u) {
      this.addPersonnel = true
      this.userInfo = u

    },
    change(obj) {
      this.addPersonnel = obj
    },
    //测试页数
    testpage() {
      console.info('c:' + this.pageHelper.currentPage)
    },

    //删除用户
    deleteUser(id) {
      ElMessageBox.confirm(
          '确定要删除id为' + id + "的用户吗？",
          '警告',
      ).then(() => {
//发送请求删除用户
      })

    },

    //选中所有
    checkAll() {
      this.userList.forEach(u => {
        u.isChecked = !u.isChecked;
      })
    },

    //上一页
    prvPage() {
      if (this.pageHelper.currentPage > 1) {
        this.pageHelper.currentPage--;
      }
    },

    // 下一页
    nxtPage() {
      if (this.pageHelper.currentPage < this.pageHelper.totalPage) {
        this.pageHelper.currentPage++;
      }
    },

    //添加用户
    addUser() {
      this.addPersonnel = true
      this.userInfo={}
    },

    //删除选中用户
    deleteSelectUser() {

    },
  },
  created() {

    //使表格显示10行
    let length = this.userList.length;
    for (let i = 0; i < 10 - length; i++) {
      this.userList.push({id: undefined, account: undefined, name: "　", isChecked: false});
    }
  }
}
</script>

<style scoped>
.my-header h4{
  color: white;
}
thead > tr > th:first-child {
  text-align: center;
  border-radius: 10px 0 0 0;
}

thead > tr > th:last-child {
  text-align: left;
  border-radius: 0 10px 0 0;
}

/*组件高度(根据实际显示器调整)和样式*/
.userList {
  line-height: 60px;
  padding: 10px;

}


/*白色文字*/
button[class^='btn'], thead {
  color: white;
}

/*单选框样式*/
.user-table input[type='checkbox'] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: rgb(52, 99, 138) 1px solid;
  background-color: white;
}

.user-table input[type='checkbox']:before {
  line-height: 15px;
  color: white;
  content: "✔";
}

/*单选框选中*/
.user-table input[type='checkbox']:checked {
  background-color: rgb(52, 99, 138);
}

/*按钮样式*/
button[class^='btn'] {
  border: none;
  padding: 5px;
  border-radius: 5px;
  margin: 10px 10px 10px 0;
}


/*用户表格*/
.user-table {
  width: 100%;
  text-align: center;
}

/*表格头圆角*/
.user-table thead {
}

/*表格体圆角*/
.user-table thead {
  border-radius: 15px;
}

/*表格行高*/
.user-table {
  border-spacing: 0;
  line-height: 56px;
}

/*表头*/
th {
  height: 50px;
  background-color: rgb(45, 109, 167);
  color: white;
}

/*行删除按钮*/
.btn-col-edt {
  color: steelblue;
}

/*行编辑按钮*/
.btn-col-rmv {
  color: orangered;
}

a[class^='btn-col'] {
  margin: 0 10px;
  text-decoration: none;
}

/*暗行*/
tr[class~='row-light1'] {
  background-color: white;
}

/*使占位符不能被选中*/
tr[class~='cant-select'] {
  user-select: none;
}

/*分页盒子*/
.el-page {
  width: fit-content;
  margin: 10px auto;
}

</style>